<template>
  <div class="warning-info">
    <div class="title">设备预警信息</div>
    <div>
      <el-table :data="alertData"
                size="mini"
                :header-cell-style="{background:'#308EF9',color:'#fff',fontWeight:'400'}"
                :cell-style="{color:'#707070'}"
                max-height="145px"
                empty-text="暂无预警">
        <!--<el-table-column label="设备编号" prop="deviceId"></el-table-column>-->
        <el-table-column label="设备名称"
                         prop="name"
                         min-width="130px"
                         show-overflow-tooltip></el-table-column>
        <el-table-column align="center"
                         :render-header="(h)=>{return h('div',[h('div','照度'),h('div',`${alertNum.OPT_LUX?alertNum.OPT_LUX:0}台`)])}">
          <template scope="{row}">
            <span
                  :class="row&&row.data&&row.data.OPT_LUX&&row.data.OPT_LUX.evaluate&&row.data.OPT_LUX.evaluate.alert?'warning-color':''">
              {{row&&row.data&&row.data.OPT_LUX&&row.data.OPT_LUX.val?row.data.OPT_LUX.val.toFixed(1):'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         min-width="60px"
                         :render-header="(h)=>{return h('div',[h('div','Ra'),h('div',`${alertNum.RA?alertNum.RA:0}台`)])}">
          <template scope="{row}">
            <span
                  :class="row&&row.data&&row.data.RA&&row.data.RA.evaluate&&row.data.RA.evaluate.alert?'warning-color':''">
              {{row&&row.data&&row.data.RA&&row.data.RA.val?row.data.RA.val.toFixed(1):'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         :render-header="(h)=>{return h('div',[h('div','EML'),h('div',`${alertNum.EML?alertNum.EML:0}台`)])}">

          <template scope="{row}">
            <span
                  :class="row&&row.data&&row.data.EML&&row.data.EML.evaluate&&row.data.EML.evaluate.alert?'warning-color':''">{{row&&row.data&&row.data.EML&&row.data.EML.val?row.data.EML.val.toFixed(1):'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         :render-header="(h)=>{return h('div',[h('div','EDI'),h('div',`${alertNum.EDI?alertNum.EDI:0}台`)])}">

          <template scope="{row}">
            <span
                  :class="row&&row.data&&row.data.EDI&&row.data.EDI.evaluate&&row.data.EDI.evaluate.alert?'warning-color':''">{{row&&row.data&&row.data.EDI&&row.data.EDI.val?row.data.EDI.val.toFixed(1):'-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         :render-header="(h)=>{return h('div',[h('div','CS'),h('div',`${alertNum.CS?alertNum.CS:0}台`)])}">

          <template scope="{row}">
            <span
                  :class="row&&row.data&&row.data.CS&&row.data.CS.evaluate&&row.data.CS.evaluate.alert?'warning-color':''">{{row&&row.data&&row.data.CS&&row.data.CS.val?row.data.CS.val.toFixed(3):'-'}}</span>

          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getAlertNum } from "@/api/platformManage";
export default {
  name: "warningInfo",
  props: {
    alertData: {
      type: Array,
      default: []
    },
    platformId: String
  },
  data() {
    return {
      alertNum: {
        TEMPERATURE: 0,
        Ra: 0,
        EML: 0,
        EDI: 0,
        CS: 0
      }
    };
  },
  watch: {
    platformId() {
      this.getAlertNumFun();
    }
  },
  mounted() {
  },
  methods: {
    //获取平台预警数量
    getAlertNumFun() {
      getAlertNum(this.platformId).then(res => {
        this.alertNum = res.value;

      });
    }
  }
};
</script>
<style lang="scss" scoped>
.warning-info {
  background-color: #fff;
  height: 190px;
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;

  .warning-color {
    color: #ff512d;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    color: #0a0a0a;
  }
}
</style>
